<template>
    <div>
        <div class="s-title">
            <img src="../assets/imgs/bjleft.png">
            <span>食品追溯</span>
            <img src="../assets/imgs/bjright.png">
        </div>
        <div class="s-rightmain">
            <div class="core-container">
                <div class="scroll-wrapper" ref="scroll1">
                    <div class="scroll-content">
                        <div class="scroll-item" v-for="(item, index) in emojis1" :key="index" @click="clickHandler(item)">
                            <div class="zhuis">
                                <div class="gonghuo">
                                    <span class="gonghuoname">供货主体：{{item.addr}}</span>
                                    <span>信用代码：{{item.companyCode}}</span>
                                    <span>负责人：{{item.managerName}}</span>
                                    <span>联系电话：{{item.managerPhone}}3</span>
                                </div>
                                <div class="gser">
                                    <img v-if="item.foodCertCode" :src="item.foodCertCode">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import axios from 'axios'
import BScroll from '@better-scroll/core'
import Slide from '@better-scroll/slide'
BScroll.use(Slide)
export default {
    data() {
        return {
            scrollY: 0,
            emojis1: [],
            // 播放间隔
            interval: 10
        }
    },
    mounted() {
        this.init();
    },
    beforeDestroy() {
        this.bs1.destroy()
    },
    created(){
        this.ci();
    },
    props: {
        countycher:{
            type: String,
            default: null
        }
    },
    watch: {
        emojis1: function () {
          this.$nextTick(() => {
            this.bs1.refresh()
          })
        },
        countycher:function(){
          this.ci();
        }
      },
    methods: {
        ci(){
            axios.post('/api/web/pub/ci/list',{type:1,country:this.countycher}).then(response => {
                console.log(response);
                this.emojis1 = response.data.rows;
                // console.log(this.emojis1);
                this.init();
                // this.emojis1 = response.data.rows;
                // let data = response.data.data.school.yearCountByCountryMap;
                // this.emojis1 = data[2020];
                // this.init();
            }
            
            ).catch(error => 
            console.log(error)
        )
        },
        init() {
            this.bs1 = new BScroll(this.$refs.scroll1, {
                probeType: 3,
                momentum: false,
                snap: {
                    loop: true,
                    threshold: 0.3,
                    speed: 200
                },
            })
            this.play();
            this.bs1.on('enable', () => {

            })
            this.bs1.on('scrollStart', () => {
                // console.log('scrollStart-')
                // this.play()
            })
            this.bs1.on('scrollEnd', () => {
                // let page = this.bs.y
                // console.log(page);
                // 当滚动结束以后 如果是自动播放的话 那么首先要清除定时器(防止手动拖动轮播图以后图片无法正确显示)然后再次执行方法 才能实现轮播
                this.play()
            })
            this.bs1.on('scroll', ({ y }) => {
                this.scrollY = y;
            })
            this.bs1.on('beforeScrollStart', () => {

            })
        },
        clickHandler(item) {
            window.alert(item)
        },
        play: function() {
            let playPage = this.scrollY - 2;
            let tabH = this.$refs.scroll1.offsetHeight;
            // console.log(tabH);
            let aa = this.emojis1.length * tabH - 3 * tabH;
            if (playPage < -aa) {
                playPage = 0;
            }
            setTimeout(() => {
                this.bs1.scrollTo(0, playPage, 1)
            }, this.interval)
        }
    }
}
</script>
<style scoped>
.core-container {
    height: 580px;
    overflow: hidden;
}

.s-title {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 11px 0 28px 0;
}

.s-title img {
    width: 100px;
    height: 3px;
}

.s-title span {
    font-size: 32px;
    font-weight: 600;
    color: #FFF;
    margin: 0 20px;
}

.scroll-wrapper {
    height: 149px;
    position: relative;
}

.scroll-item {
    height: 149px;
    margin-left: 20px;
    padding: 10px 0;
}

.zhuis {
    display: flex;
    justify-content: space-between;
    height: 103px;
    background: rgba(0, 0, 0, 0.6);
    border: 3px solid;
    padding: 20px;
    border-image: linear-gradient(270deg, rgba(0, 252, 255, 0.1), rgba(0, 252, 255, 1), rgba(0, 252, 255, 0.1)) 3 3;
}

.gonghuo .gonghuoname {
    font-size: 18px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #0CFED9;
    line-height: 25px;
}

.gonghuo span {
    display: block;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 20px;
}
.gser{
    width: 109px;
height: 109px;
border-radius: 4px;
}
.gser img{
    width: 100%;
    height: 100%;
    border-radius: 4px;
}
</style>